<!--
 * @Description: 柱状图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: 卢金辉 3400170271@qq.com
 * @LastEditTime: 2025-09-28 08:50:33
-->
<template>
  <div style="height: 100%;">
    <div ref="image3" style="height: 200px;"></div>
  </div>
</template>

<script>
import { get } from '@/utils/request';
import { Column } from '@antv/g2plot';
export default {
  data() {
    return {
      engData: [],
    };
  },
  computed: {},
  methods: {
    loadColumn() {
      const columnPlot = new Column(this.$refs.image3, {
        data: this.engData,
        xField: 'type',
        yField: 'value',
        color: '#a8ddb5',
        label: {
          position: 'middle',
          style: {
            fill: '#000',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
            style: {
              fill: "#000",
              fontSize: 11,
            },
          },
        },
        yAxis: {
          label: {
            style: {
              fill: "#000",
              fontSize: 13,
            },
          },
        },
        meta: {
          type: {
            alias: 'type',
          },
          sales: {
            alias: 'value',
          },
        },
        tooltip: {
          showMarkers: true,
          domStyles: {
            "g2-tooltip": {
              background: "#ececec",
              color: "#000",
              fontSize: 15,
            },
          },
        },
      });

      columnPlot.render();
    },
    async getEngData() {
      let res = await get('/dashboard/queryEngineerBindDeviceNumber');
      // console.log(res, '333');
      this.engData = res.data;
    },
  },
  created() { },
  async mounted() {
    await this.getEngData();
    this.loadColumn();
  }
};
</script>
<style scoped></style>